<template>
  <div id="app-os-notification">
    <div class="one-block-1">
      <span>
        1. 弹出桌面通知
      </span>
    </div>
    <div class="one-block-2">
      <a-space>
        <a-button @click="sendNotification(0)">默认</a-button>
        <a-button @click="sendNotification(1)">发出提示音</a-button>
        <a-button @click="sendNotification(2)">点击通知触发事件</a-button>
        <a-button @click="sendNotification(3)">关闭通知触发事件</a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { ipcApiRoute } from '@/api';
import { ipc } from '@/utils/ipcRenderer';
import { onMounted } from 'vue';
import { message } from 'ant-design-vue';

const views = [
  {
    type: 'main',
    title: '通知标题',
    subtitle: '副标题', // macOS系统专有属性
    body: '这是通知内容-默认',
    silent: true,
  },
  {
    type: 'main',
    title: '提示音',
    subtitle: '副标题-提示音',
    body: '这是通知内容-提示音',
    silent: false,
  },
  {
    type: 'main',
    title: '点击通知事件',
    subtitle: '副标题-点击通知事件',
    body: '这是通知内容-点击通知事件',
    clickEvent: true
  },
  {
    type: 'main',
    title: '关闭通知事件',
    subtitle: '副标题-关闭通知事件',
    body: '这是通知内容-点击通知事件',
    closeEvent: true
  },
]

onMounted(() => {
  init()
})

/**
 * 初始化通知监听器
 *
 * 此函数主要用于初始化应用的通知系统它通过移除现有的通知监听器，然后添加一个新的监听器来工作
 * 监听器等待来自特定通道（ipcApiRoute.os.sendNotification）的通知当接收到通知时，它会检查通知内容的类型
 * 如果通知内容是一个对象，则会通过message.info方法显示通知消息
 */
function init() {
  // 移除已有的通知监听器，以避免重复监听
  ipc.removeAllListeners(ipcApiRoute.os.sendNotification);

  // 添加新的通知监听器
  ipc.on(ipcApiRoute.os.sendNotification, (event, result) => {
    // 检查通知内容是否为对象类型
    if (Object.prototype.toString.call(result) === '[object Object]') {
      // 使用message.info方法显示通知消息
      message.info(result.msg);
    }
  })
}


/**
 * 发送通知
 *
 * 该函数通过IPC（Inter-Process Communication）模块发送通知它使用特定的API路由来发送通知，并传递视图对象作为通知的内容
 *
 * @param {number} index - 视图索引，用于指定通知的内容
 */
function sendNotification (index) {
  ipc.send(ipcApiRoute.os.sendNotification, views[index]);
}

</script>
<style lang="less" scoped>
#app-os-notification {
  padding: 0px 10px;
  text-align: left;
  width: 100%;
  .one-block-1 {
    font-size: 16px;
    padding-top: 10px;
  }
  .one-block-2 {
    padding-top: 10px;
  }
}
</style>
